<template>
  <view class="container">
    <uni-nav-bar title="自营盘点商品选择" fixed statusBar :border="false" height="88rpx" background-color="#fff" left-icon="left"
      @clickLeft="onClickLeft" />
    <view class="search">
      <uni-search-bar v-model="name" radius="100" placeholder="请输入名称或一维码" cancelButton="none"
        style="flex: 1;margin: 0;padding: 0;margin-right: 20rpx;" @confirm="searchFn" @clear="clear" />
      <!-- <uni-easyinput v-model="name" placeholder="请输入名称或一维码" :clearable="false" trim="all"/> -->
      <!-- 			<uni-icons type="search" size="28" style="margin: 0 15rpx;"></uni-icons> -->
      <view class="btn type-1" @click="reqAllListFn" style="margin-right: 10rpx;">全盘</view>
      <view class="btn type-4" @click="reqAllCancelListFn">取消</view>
    </view>
    <view class="table">
      <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"
        style="overflow: scroll;box-sizing: border-box;"
        :style="{ paddingBottom: (safeAreaBottom + 30) + 'px', height: `calc(100vh - 188rpx - ${statusBarHeight}px)` }">
        <uni-tr>
          <uni-th width="50" align="center">序号</uni-th>
          <uni-th align="center">商品名称</uni-th>
          <uni-th align="center">条码</uni-th>
          <uni-th align="center">库存</uni-th>
          <uni-th width="100" align="center">操作</uni-th>
        </uni-tr>
        <uni-tr v-for="(item, index) in tableData" :key="index">
          <uni-td align="center">{{ index + 1 }}</uni-td>
          <uni-td align="center">{{ item.name }}</uni-td>
          <uni-td align="center">{{ item.barCode }}</uni-td>
          <uni-td align="center">{{ item.inventoryNum }}</uni-td>
          <uni-td>
            <view class="uni-group">
              <button class="uni-button" size="mini" v-if="item.type == '0'" type="primary"
                @click="add(item.commodityId)">加入盘点</button>
              <button class="uni-button" size="mini" v-if="item.type == '1'" type="warn"
                @click="cancelFn(item.id)">取消盘点</button>
            </view>
          </uni-td>
        </uni-tr>
      </uni-table>
    </view>
    <view class="bottomFix" :style="{ paddingBottom: safeAreaBottom + 'px' }">
      <view class="uni-pagination-box"><uni-pagination show-icon :page-size="page.pageSize" :current="page.pageNum"
          :total="page.total" @change="change" />
      </view>
    </view>
    <cls-DragBtn is-dock :bottom-px="120" @btnClick="pdOnClick">
      <view class="floatBox btn type-1">盘点</view>
    </cls-DragBtn>
  </view>
</template>

<script>
import { reqSelfStandardList, reqAllList, reqCancelStock, reqAddStock, reqAllCancel } from '@/apis/goods'
export default {
  name: 'ZyPdCheckGoods',
  data() {
    return {
      name: '',
      tableData: [],
      page: {
        pageNum: 1,
        pageSize: 15,
        total: 0,
      },
      loading: false,
    }
  },
  onLoad() {
    this.reqSelfStandardList()
  },
  methods: {
    async reqSelfStandardList() {
      const res = await reqSelfStandardList({ ...this.page, name: this.name })
      if (res.code == 200) {
        this.tableData = res.data.list
        this.page.total = res.data.total
        console.log('this.tableData', res.data);
      }
    },
    async reqAllListFn() {
      uni.showLoading({
        title: '加载中'
      });

      const res = await reqAllList()
      if (res.code == 200) {
        // this.tableData = res.data.list
        // this.page.total = res.data.total
        // console.log('this.tableData', res.data);
        this.reqSelfStandardList()
      }
      uni.hideLoading();
    },
    async reqAllCancelListFn() {
      const res = await reqAllCancel()
      if (res.code == 200) {
        // this.tableData = res.data.list
        // this.page.total = res.data.total
        // console.log('this.tableData', res.data);
        this.reqSelfStandardList()
      }
    },
    async add(id) {
      const res = await reqAddStock({ commodityId: id })
      if (res.code == 200) {
        this.reqSelfStandardList()
      }
    },
    async cancelFn(id) {
      const res = await reqCancelStock({ id: id })
      if (res.code == 200) {
        this.reqSelfStandardList()
      }
    },
    clear() {
      this.page.pageNum = 1
      this.reqSelfStandardList()
    },
    async searchFn() {
      this.page.pageNum = 1
      const res = await reqSelfStandardList({ ...this.page, name: this.name })
      if (res.code == 200) {
        this.tableData = res.data.list
        this.page.total = res.data.total
        console.log('this.tableData', res.data);
      }
    },
    change(e) {
      this.page.pageNum = e.current;
      console.log('change', this.page);
      this.reqSelfStandardList()
    },
    pdOnClick() {
      this.$navTo('./zyPdRecord');
    }
  },
}
</script>

<style>
page {
  background: #f7f7f7;
}
</style>

<style lang="scss" scoped>
.search {
  display: flex;
  padding: 20rpx;
  box-sizing: border-box;
  align-items: center;
  background-color: #fff;

  /deep/ .uni-searchbar__box {
    height: 60rpx;
  }

  .btn {
    width: 120rpx;
    height: 60rpx;
    line-height: 60rpx;
    border-radius: 8rpx;
    text-align: center;
  }
}

/* 固定表头 */
.uni-table-tr {
  &:first-child {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #fff;
  }
}

/* 操作列固定 */
.uni-table-tr .uni-table-th:last-child,
.uni-table-tr .uni-table-td:last-child {
  position: sticky;
  right: 0;
  background-color: #fff;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
  /* 阴影的偏移、模糊距离和颜色 */
  z-index: 1;
}

.uni-table-tr:nth-child(2n+1) .uni-table-td:last-child {
  background-color: #fafafa;
}

.uni-table-th,
.uni-table-td {
  padding: 16rpx 10rpx;
}

.uni-table-td {
  line-height: 20rpx;
}

.uni-table-scroll {
  box-sizing: border-box;
}

.uni-group {
  display: flex;
  align-items: center;
}

.bottomFix {
  position: fixed;
  width: 100%;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: $uni-font-size-base;
  z-index: 2;

  .uni-pagination-box {
    flex: 1;
    background-color: #f7f7f7;
  }
}

.floatBox {
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx !important;
  box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .3);
  font-weight: 600;
  text-align: center;
  border-radius: 50%;
  padding: 10rpx;
  box-sizing: border-box;
}
</style>